<template>
    <div class="week-hot">
      <div class="title-wrapper">
        <span class="title">
          <i class="iconfont">&#xe62f;</i>
          本周热门榜单
        </span>
        <span class="more">
          全部榜单
          <i class="iconfont">&#xe601;</i>
        </span>
      </div>
      <scroller lock-y scrollbar-x>
        <div class="hotsale-wrapper">
          <div class="hotsale-item" v-for="(item,index) in WeekHotData" :key="item.id">
            <span :class="setTop(index+1)" v-if="isOrder(index+1)"></span>
            <img class="hotsale-item-img" :src="item.imgUrl" :alt="item.name">
            <p class="hotsale-item-desc">{{item.name}}</p>
            <p class="hotsale-item-price"><span class="price">￥{{item.price}}</span>起</p>
          </div>
        </div>
    </scroller>
    </div>
</template>

<script>
export default {
  name: 'WeekHot',
  methods: {
    setTop: function (index) {
      return 'top ' + 'top-' + index
    },
    isOrder: function (index) {
      return index < 4
    }
  },
  props: {
    WeekHotData: {
      type: Array
    }
  }
}
</script>

<style scoped lang="stylus">
  .week-hot
    margin-top: .3rem
    background: #fff
    padding-top: .3rem
    .title
      font-size: .32rem
      padding-left: .2rem
      .iconfont
        color: #ff8a43
    .more
      display: inline-block
      float: right
      padding-right: .2rem
      font-size: .2rem
      color: #666
    .hotsale-wrapper
      width: 13.2rem
      height: 2.8rem
      position: relative
      margin-top: .3rem
    .hotsale-item
      width: 2rem
      height: 2.8rem
      display:inline-block
      margin-left: .2rem
      float: left
      text-align: center
      padding: .06rem 0 .2rem
      position: relative
      .top
        width: .84rem
        height .4rem
        top: 0
        left: 0
        display: inline-block
        position: absolute
        background-size: cover !important
      .top-1
        background: url('~@/assets/images/order1.png') center center no-repeat
      .top-2
        background: url('~@/assets/images/order2.png') center center no-repeat
      .top-3
        background: url('~@/assets/images/order3.png') center center no-repeat
      .hotsale-item-img
        width: 100%
      .hotsale-item-desc
        padding: .2rem 0 .1rem 0
        font-size: .2rem
      .hotsale-item-price
        font-size: .24rem
        .price
          color: #ff8300
</style>
